<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>nav</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <link rel="stylesheet" href="./css/nav.css">

</head>

<body>

    <!-- 仅在手机端显示 visible-xs-->
    <!-- 仅在电脑端显示 hidden-xs -->
    <div class="nav-scroll visible-xs">
        <div class="swiper-container">
            <ul class="swiper-wrapper">
                <!--  -->
                <li class="swiper-slide">
                    <p>一级菜单1 <i class="glyphicon glyphicon-triangle-bottom"></i></p>
                    <ul class="nav-item">
                        <li>
                            <a href="javascript:;">子菜单1</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单2</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                    </ul>
                </li>
                <!--  -->
                <li class="swiper-slide">
                    <p> 一级菜单2 <i class="glyphicon glyphicon-triangle-bottom"></i></p>
                    <ul class="nav-item">
                        <li>
                            <a href="javascript:;">子菜单1</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单2</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                    </ul>
                </li>
                <!--  -->
                <li class="swiper-slide">
                    <p> 一级菜单3 <i class="glyphicon glyphicon-triangle-bottom"></i></p>
                    <ul class="nav-item">
                        <li>
                            <a href="javascript:;">子菜单1</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单2</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                    </ul>
                </li>
                <!--  -->
                <li class="swiper-slide">
                    <p> 一级菜单4 <i class="glyphicon glyphicon-triangle-bottom"></i></p>
                    <ul class="nav-item">
                        <li>
                            <a href="javascript:;">子菜单1</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单2</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                    </ul>
                </li>
                <!--  -->
                <li class="swiper-slide">
                    <p> 一级菜单5 <i class="glyphicon glyphicon-triangle-bottom"></i></p>
                    <ul class="nav-item">
                        <li>
                            <a href="javascript:;">子菜单1</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单2</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                        <li>
                            <a href="javascript:;">子菜单3</a>
                        </li>
                    </ul>
                </li>
                <!--  -->
            </ul>
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
    <!-- js -->
    <aside>
        <script type="text/javascript" src="./bootstrap/js/jquery.min.js"></script>
        <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./swiper/swiper.min.js"></script>
        <script type="text/javascript" src="./js/nav.js"></script>
    </aside>
    <!-- js -->
</body>

</html>